<template>
    <div id="xclToast" class="xcl_toast" v-show="show">
        <div class="xcl_alert_inner" id="xcl_alert_inner">
            <div class="con" >{{showContent}}</div>
        </div>
    </div>
</template>
<script>
    export default {
        replace: true,
        props: ['showContent','show'],
        methods:{
        }
    }
</script>
<style lang="stylus">
.xcl_toast {
    position:fixed;
    z-index:999;
    background-color:transparent;
    top:0;
    left:0;
    bottom:0;
    right:0;
    .xcl_alert_inner {
        margin: auto;  
        position: absolute;  
        z-index:999;
        top: 50%; left: 50%;  width:80%;
        transform: translate(-50%,-50%);  
        background-color: #fff;
        color: #333;
        .con{
            padding:.8em 1em;text-align:left;background:rgba(0,0,0,1);color:#fff;border-radius: 4px;text-align:center
        }
        animation:scaleMe 3s ease;
    }
    @keyframes scaleMe {
        0%{
            opacity:0;
            transform:translate(-50%,-50%) scale(1.1);
        }
        20%,80%{
            opacity:1;
            transform:translate(-50%,-50%) scale(1);
        }
        100%{
            opacity:0;
            transform:translate(-50%,-50%) scale(0.9);
        }
    }

}
</style>